<template>
  <div>
    <div class="expand-wrap" @click="handleClick">
      {{ isExpand ? '收起' : '展开'
      }}<i class="icon-expand" :class="{ 'icon-expand-up': isExpand }"></i>
    </div>
    <button @click="goLife">生命周期</button>
  </div>
</template>

<script>
export default {
  name: 'demoHome',
  data() {
    return {
      isExpand: false
    };
  },
  methods: {
    handleClick() {
      this.isExpand = !this.isExpand;
    },
    goLife() {
      this.$router.push({ path: '/vueLife' });
    }
  }
};
</script>

<style lang="scss" scoped>
.expand-wrap {
  display: flex;
  align-items: center;

  .icon-expand {
    width: 20px;
    height: 20px;
    background: url('../../assets/arrow.png') no-repeat;
    background-size: 100% 100%;
    display: inline-block;
  }
  .icon-expand-up {
    transform: rotate(180deg);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
  }
}
</style>
